<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>
		<style>
			#app{
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<template>
				<div class="block">
					<span class="demonstration">默认</span>
					<el-slider v-model="value1"></el-slider>
				</div>
				<br />
				<div class="block">
					<span class="demonstration">自定义初始值</span>
					<el-slider v-model="value2"></el-slider>
				</div>
			</template>
			<hr />
			
			<div class="block">
				<span class="demonstration">不显示间断点</span>
				<el-slider v-model="value3" :step="10">
				</el-slider>
			</div>
			<hr />
			
			<template>
				<div class="block">
					<el-slider v-model="value4" show-input>
					</el-slider>
				</div>
			</template>
			<hr />
			
			<template>
				<div class="block">
					<el-slider v-model="value5" range show-stops :max="10">
					</el-slider>
				</div>
			</template>
			<hr />
			
			<template>
				<div class="block">
					<el-slider v-model="value6" vertical height="200px">
					</el-slider>
				</div>
			</template>
			<hr />
			
			<template>
				<div class="block">
					<el-slider v-model="value7" range :marks="marks">
					</el-slider>
				</div>
			</template>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				value1: 0,
				value2: 50,
				value3: 0,
				value4: 0,
				value5: [4, 8],
				value6: 0,
				value7: [30, 60],
				marks: {
					0: '0°C',
					8: '8°C',
					37: '37°C',
					50: {
						style: {
							color: '#1989FA'
						},
					},
				}
			},
			methods: {
				formatTooltip(val) {
					return val / 100;
				}
			}
		})
	</script>
</html>